<template>
  <div class="earthquake-settings">
    <ContentWrap>
      <Form ref="formRef" :schema="allSchemas.formSchema" :disabled="isShow" >
        <template #reportTypes="form">
          <MyCheckBox v-model="form['reportTypes']" :option="reportTypeOpt"/>
        </template>
        <template #reportFormat="form">
          <MyCheckBox v-model="form['reportFormat']" :option="reportFileTypeOpt"/>
        </template>
        <template #topicTypes="form">
          <MyCheckBox v-model="form['topicTypes']" :option="specialtopicTypeOpt"/>
        </template>
        <template #resultData="form">
          <MyCheckBox v-model="form['resultData']" :option="resultTypeOpt"/>
        </template>
        <template #outsideFiles="form">
          <MyCheckBox v-model="form['outsideFiles']" :option="externalFileTypeOpt"/>
        </template>
      </Form>
      <div style="text-align: center;">
        <el-button type="primary" v-show="isbut" @click="modify">修改</el-button>
      </div>
      <div v-show="showBut" style="text-align: center;">
        <el-button type="primary" @click="storage">保存</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </ContentWrap>
  </div>
</template>

<script setup>
import * as sharConfigApi from '@/api/sharConfig'
import {allSchemas, reportTypeOpt,
  reportFileTypeOpt, specialtopicTypeOpt,
  resultTypeOpt, externalFileTypeOpt
} from "./filestypes";
import {ElButton} from "element-plus";

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10
})
const showBut = ref(false)
const formRef = ref()
const isbut = ref(true)
const isShow = ref(true)
const form = ref({
  id: '',
  reportTypes: '',
  reportFormat: '',
  topicTypes: '',
  resultData: '',
  outsideFiles: ''
})

//获取共享配置全部信息
const sharConfigList = async () => {
  const list = await sharConfigApi.getSharConfigList(queryParams).then((res) => {
    return res
  })
  const data = list.list
  if (data[0] === undefined) {
    isShow.value = false
    isbut.value = false
    showBut.value = true
    console.log('未获取到共享配置信息')
    return
  }
  form.value = data[0]
  //将最后一位的逗号去掉
  form.value.reportTypes = form.value.reportTypes.substring(0, form.value.reportTypes.length - 1)
  form.value.reportFormat = form.value.reportFormat.substring(0, form.value.reportFormat.length - 1)
  form.value.topicTypes = form.value.topicTypes.substring(0, form.value.topicTypes.length - 1)
  form.value.resultData = form.value.resultData.substring(0, form.value.resultData.length - 1)
  form.value.outsideFiles = form.value.outsideFiles.substring(0, form.value.outsideFiles.length - 1)
  const result = form.value
  //转换格式
  result.reportTypes = result.reportTypes ? result.reportTypes.split(',') : []
  result.reportFormat = result.reportFormat ? result.reportFormat.split(',') : []
  result.topicTypes = result.topicTypes ? result.topicTypes.split(',') : []
  result.resultData = result.resultData ? result.resultData.split(',') : []
  result.outsideFiles = result.outsideFiles ? result.outsideFiles.split(',') : []
  formRef.value.setValues(result)

}

// 修改
function modify() {
  showBut.value = true
  isbut.value = false
  isShow.value = false
}

// 保存
const storage = async () => {
  if (!formRef) return
  const valid = await formRef.value.getElFormRef().validate()
  if (!valid) return
  const data = formRef.value.formModel;
  form.value.reportTypes = data.reportTypes.join(',') + (data.reportTypes.length > 0 ? ',' : '');
  form.value.reportFormat = data.reportFormat.join(',') + (data.reportFormat.length > 0 ? ',' : '');
  form.value.topicTypes = data.topicTypes.join(',') + (data.topicTypes.length > 0 ? ',' : '');
  form.value.resultData = data.resultData.join(',') + (data.resultData.length > 0 ? ',' : '');
  form.value.outsideFiles = data.outsideFiles.join(',') + (data.outsideFiles.length > 0 ? ',' : '');
  form.value.id = data.id
  sharConfigApi.updateSharConfig(form.value).then((res) => {
    if (res === 1) {
      showBut.value = false
      isbut.value = true
      isShow.value = true
      sharConfigList()
    }
  })
}
// 关闭
function close() {
  showBut.value = false
  isbut.value = true
  isShow.value = true
}

onMounted(() => {
  sharConfigList()
})
</script>

<style scoped>
.earthquake-settings {
  border-radius: 8px !important;
}
</style>
